<!DOCTYPE html>
<!--
Template Name:  SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4
Version: 4.0.0
Author: Sunnyat Ahmmed
Website: http://www.bootstrapmb.com


-->
<html lang="en" xmlns="http://www.w3.org/1999/html"  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>
        成绩录入页面
    </title>
    <meta name="description" content="Inbox Write">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
    <!-- Call App Mode on ios devices -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- Remove Tap Highlight on Windows Phone IE -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- base css -->
    <link rel="stylesheet" media="screen, print" href="/css/vendors.bundle.css">
    <link rel="stylesheet" media="screen, print" href="/css/app.bundle.css">
    <!-- Place favicon.ico in the root directory -->
    <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
    <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="stylesheet" media="screen, print" href="/css/fa-solid.css">
    <link rel="stylesheet" media="screen, print" href="/css/fa-brands.css">
</head>
<body class="mod-bg-1 nav-function-minify layout-composed">
<form action="/teacher/save" method="post">
    <!-- DOC: script to save and load page settings -->
    <script>
        /**
         *	This script should be placed right after the body tag for fast execution
         *	Note: the script is written in pure javascript and does not depend on thirdparty library
         **/
        'use strict';

        var classHolder = document.getElementsByTagName("BODY")[0],
            /**
             * Load from localstorage
             **/
            themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
                {},
            themeURL = themeSettings.themeURL || '',
            themeOptions = themeSettings.themeOptions || '';
        /**
         * Load theme options
         **/
        if (themeSettings.themeOptions)
        {
            classHolder.className = themeSettings.themeOptions;
            console.log("%c✔ Theme settings loaded", "color: #148f32");
        }
        else
        {
            console.log("Heads up! Theme settings is empty or does not exist, loading default settings...");
        }
        if (themeSettings.themeURL && !document.getElementById('mytheme'))
        {
            var cssfile = document.createElement('link');
            cssfile.id = 'mytheme';
            cssfile.rel = 'stylesheet';
            cssfile.href = themeURL;
            document.getElementsByTagName('head')[0].appendChild(cssfile);
        }
        /**
         * Save to localstorage
         **/
        var saveSettings = function()
        {
            themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function(item)
            {
                return /^(nav|header|mod|display)-/i.test(item);
            }).join(' ');
            if (document.getElementById('mytheme'))
            {
                themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
            };
            localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
        }
        /**
         * Reset settings
         **/
        var resetSettings = function()
        {
            localStorage.setItem("themeSettings", "");
        }

    </script>
    <!-- BEGIN Page Wrapper -->
    <div class="page-wrapper">
        <div class="page-inner">
            <!-- BEGIN Left Aside -->
            <aside class="page-sidebar">
                <div class="page-logo">
                    <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal" data-target="#modal-shortcut">
                        <img src="/img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
                        <span class="page-logo-text mr-1">SmartAdmin WebApp</span>
                        <span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
                        <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
                    </a>
                </div>
                <!-- BEGIN PRIMARY NAVIGATION -->
                <nav id="js-primary-nav" class="primary-nav" role="navigation">
                    <div class="nav-filter">
                        <div class="position-relative">
                            <input type="text" id="nav_filter_input" placeholder="Filter menu" class="form-control" tabindex="0">
                            <a href="#" onclick="return false;" class="btn-primary btn-search-close js-waves-off" data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar">
                                <i class="fal fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="info-card">
                        <img src="/img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Dr. Codex Lantern">
                        <div class="info-card-text">
                            <a href="#" class="d-flex align-items-center text-white">
                                    <span class="text-truncate text-truncate-sm d-inline-block">
                                        Dr. Codex Lantern
                                    </span>
                            </a>
                            <span class="d-inline-block text-truncate text-truncate-sm">Toronto, Canada</span>
                        </div>
                        <img src="/img/card-backgrounds/cover-2-lg.png" class="cover" alt="cover">
                        <a href="#" onclick="return false;" class="pull-trigger-btn" data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar" data-focus="nav_filter_input">
                            <i class="fal fa-angle-down"></i>
                        </a>
                    </div>
                    <ul id="js-nav-menu" class="nav-menu">
                        <li>
                            <a href="#" title="Application Intel" data-filter-tags="application intel">
                                <i class="fal fa-info-circle"></i>
                                <span class="nav-link-text" data-i18n="nav.application_intel">Application Intel</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="intel_analytics_dashboard.html" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
                                        <span class="nav-link-text" data-i18n="nav.application_intel_analytics_dashboard">Analytics Dashboard</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="intel_marketing_dashboard.html" title="Marketing Dashboard" data-filter-tags="application intel marketing dashboard">
                                        <span class="nav-link-text" data-i18n="nav.application_intel_marketing_dashboard">Marketing Dashboard</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="intel_introduction.html" title="Introduction" data-filter-tags="application intel introduction">
                                        <span class="nav-link-text" data-i18n="nav.application_intel_introduction">Introduction</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="intel_privacy.html" title="Privacy" data-filter-tags="application intel privacy">
                                        <span class="nav-link-text" data-i18n="nav.application_intel_privacy">Privacy</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="intel_build_notes.html" title="Build Notes" data-filter-tags="application intel build notes">
                                        <span class="nav-link-text" data-i18n="nav.application_intel_build_notes">Build Notes</span>
                                        <span class="">v4.0.1</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Theme Settings" data-filter-tags="theme settings">
                                <i class="fal fa-cog"></i>
                                <span class="nav-link-text" data-i18n="nav.theme_settings">Theme Settings</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="settings_how_it_works.html" title="How it works" data-filter-tags="theme settings how it works">
                                        <span class="nav-link-text" data-i18n="nav.theme_settings_how_it_works">How it works</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="settings_layout_options.html" title="Layout Options" data-filter-tags="theme settings layout options">
                                        <span class="nav-link-text" data-i18n="nav.theme_settings_layout_options">Layout Options</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="settings_skin_options.html" title="Skin Options" data-filter-tags="theme settings skin options">
                                        <span class="nav-link-text" data-i18n="nav.theme_settings_skin_options">Skin Options</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="settings_saving_db.html" title="Saving to Database" data-filter-tags="theme settings saving to database">
                                        <span class="nav-link-text" data-i18n="nav.theme_settings_saving_to_database">Saving to Database</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="disabled">
                            <a href="javascript:void(0);" title="Disabled item" data-filter-tags="utilities disabled item">
                                <span class="nav-link-text" data-i18n="nav.utilities_disabled_item">Disabled item</span>
                            </a>
                        </li>
                    </ul>
                    </li>

                    <div class="filter-message js-filter-message bg-success-600"></div>
                </nav>
                <!-- END PRIMARY NAVIGATION -->
                <!-- NAV FOOTER -->
                <div class="nav-footer shadow-top">
                    <a href="#" onclick="return false;" data-action="toggle" data-class="nav-function-minify" class="hidden-md-down">
                        <i class="ni ni-chevron-right"></i>
                        <i class="ni ni-chevron-right"></i>
                    </a>
                    <ul class="list-table m-auto nav-footer-buttons">
                        <li>
                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Chat logs">
                                <i class="fal fa-comments"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Support Chat">
                                <i class="fal fa-life-ring"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Make a call">
                                <i class="fal fa-phone"></i>
                            </a>
                        </li>
                    </ul>
                </div> <!-- END NAV FOOTER -->
            </aside>
            <!-- END Left Aside -->
            <div class="page-content-wrapper">
                <!-- BEGIN Page Header -->
                <header class="page-header" role="banner">
                    <!-- we need this logo when user switches to nav-function-top -->
                    <div class="page-logo">
                        <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal" data-target="#modal-shortcut">
                            <img src="/img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
                            <span class="page-logo-text mr-1">SmartAdmin WebApp</span>
                            <span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
                            <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
                        </a>
                    </div>
                    <!-- DOC: nav menu layout change shortcut -->
                    <div class="hidden-md-down dropdown-icon-menu position-relative">
                        <a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="Hide Navigation">
                            <i class="ni ni-menu"></i>
                        </a>
                        <ul>
                            <li>
                                <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="Minify Navigation">
                                    <i class="ni ni-minify-nav"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-fixed" title="Lock Navigation">
                                    <i class="ni ni-lock-nav"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- DOC: mobile button appears during mobile width -->
                    <div class="hidden-lg-up">
                        <a href="#" class="header-btn btn press-scale-down" data-action="toggle" data-class="mobile-nav-on">
                            <i class="ni ni-menu"></i>
                        </a>
                    </div>
                    <div class="search">
                        <form class="app-forms hidden-xs-down" role="search" action="/page_search.html" autocomplete="off">
                            <input type="text" id="search-field" placeholder="Search for anything" class="form-control" tabindex="1">
                            <a href="#" onclick="return false;" class="btn-danger btn-search-close js-waves-off d-none" data-action="toggle" data-class="mobile-search-on">
                                <i class="fal fa-times"></i>
                            </a>
                        </form>
                    </div>
                    <div class="ml-auto d-flex">
                        <!-- activate app search icon (mobile) -->
                        <div class="hidden-sm-up">
                            <a href="#" class="header-icon" data-action="toggle" data-class="mobile-search-on" data-focus="search-field" title="Search">
                                <i class="fal fa-search"></i>
                            </a>
                        </div>
                        <!-- app settings -->
                        <div class="hidden-md-down">
                            <a href="#" class="header-icon" data-toggle="modal" data-target=".js-modal-settings">
                                <i class="fal fa-cog"></i>
                            </a>
                        </div>
                        <!-- app shortcuts -->
                        <div>
                            <a href="#" class="header-icon" data-toggle="dropdown" title="My Apps">
                                <i class="fal fa-cube"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-animated w-auto h-auto">
                                <div class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center rounded-top">
                                    <h4 class="m-0 text-center color-white">
                                        Quick Shortcut
                                        <small class="mb-0 opacity-80">User Applications & Addons</small>
                                    </h4>
                                </div>

                                <!-- app message -->
                                <a href="#" class="header-icon" data-toggle="modal" data-target=".js-modal-messenger">
                                    <i class="fal fa-globe"></i>
                                    <span class="badge badge-icon">!</span>
                                </a>
                                <!-- app notification -->
                                <div>
                                    <a href="#" class="header-icon" data-toggle="dropdown" title="You got 11 notifications">
                                        <i class="fal fa-bell"></i>
                                        <span class="badge badge-icon">11</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-animated dropdown-xl">
                                        <div class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center rounded-top mb-2">
                                            <h4 class="m-0 text-center color-white">
                                                11 New
                                                <small class="mb-0 opacity-80">User Notifications</small>
                                            </h4>
                                        </div>
                                        <ul class="nav nav-tabs nav-tabs-clean" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link px-4 fs-md js-waves-on fw-500" data-toggle="tab" href="#tab-messages" data-i18n="drpdwn.messages">Messages</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link px-4 fs-md js-waves-on fw-500" data-toggle="tab" href="#tab-feeds" data-i18n="drpdwn.feeds">Feeds</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link px-4 fs-md js-waves-on fw-500" data-toggle="tab" href="#tab-events" data-i18n="drpdwn.events">Events</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content tab-notification">
                                            <div class="tab-pane active p-3 text-center">
                                                <h5 class="mt-4 pt-4 fw-500">
                                                <span class="d-block fa-3x pb-4 text-muted">
                                                    <i class="ni ni-arrow-up text-gradient opacity-70"></i>
                                                </span> Select a tab above to activate
                                                    <small class="mt-3 fs-b fw-400 text-muted">
                                                        This blank page message helps protect your privacy, or you can show the first message here automatically through
                                                        <a href="#">settings page</a>
                                                    </small>
                                                </h5>
                                            </div>
                                            <div class="tab-pane" id="tab-messages" role="tabpanel">
                                                <div class="custom-scroll h-100">
                                                    <ul class="notification">
                                                        <li class="unread">
                                                            <a href="#" class="d-flex align-items-center">
                                                            <span class="status mr-2">
                                                                <span class="profile-image rounded-circle d-inline-block" style="background-image:url('static/img/demo/avatars/avatar-c.png')"></span>
                                                            </span>
                                                                <span class="d-flex flex-column flex-1 ml-1">
                                                                <span class="name">Melissa Ayre <span class="badge badge-primary fw-n position-absolute pos-top pos-right mt-1">INBOX</span></span>
                                                                <span class="msg-a fs-sm">Re: New security codes</span>
                                                                <span class="msg-b fs-xs">Hello again and thanks for being part...</span>
                                                                <span class="fs-nano text-muted mt-1">56 seconds ago</span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li class="unread">
                                                            <a href="#" class="d-flex align-items-center">
                                                            <span class="status mr-2">
                                                                <span class="profile-image rounded-circle d-inline-block" style="background-image:url('static/img/demo/avatars/avatar-a.png')"></span>
                                                            </span>
                                                                <span class="d-flex flex-column flex-1 ml-1">
                                                                <span class="name">Adison Lee</span>
                                                                <span class="msg-a fs-sm">Msed quia non numquam eius</span>
                                                                <span class="fs-nano text-muted mt-1">2 minutes ago</span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#" class="d-flex align-items-center">
                                                            <span class="status status-success mr-2">
                                                                <span class="profile-image rounded-circle d-inline-block" style="background-image:url('static/img/demo/avatars/avatar-b.png')"></span>
                                                            </span>
                                                                <span class="d-flex flex-column flex-1 ml-1">
                                                                <span class="name">Oliver Kopyuv</span>
                                                                <span class="msg-a fs-sm">Msed quia non numquam eius</span>
                                                                <span class="fs-nano text-muted mt-1">3 days ago</span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#" class="d-flex align-items-center">
                                                            <span class="status status-warning mr-2">
                                                                <span class="profile-image rounded-circle d-inline-block" style="background-image:url('static/img/demo/avatars/avatar-e.png')"></span>
                                                            </span>
                                                                <span class="d-flex flex-column flex-1 ml-1">
                                                                <span class="name">Dr. John Cook PhD</span>
                                                                <span class="msg-a fs-sm">Msed quia non numquam eius</span>
                                                                <span class="fs-nano text-muted mt-1">2 weeks ago</span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#" class="d-flex align-items-center">
                                                            <span class="status status-success mr-2">
                                                                <!-- <img src="img/demo/avatars/avatar-m.png" data-src="img/demo/avatars/avatar-h.png" class="profile-image rounded-circle" alt="Sarah McBrook" /> -->
                                                                <span class="profile-image rounded-circle d-inline-block" style="background-image:url('static/img/demo/avatars/avatar-h.png')"></span>
                                                            </span>
                                                                <span class="d-flex flex-column flex-1 ml-1">
                                                                <span class="name">Sarah McBrook</span>
                                                                <span class="msg-a fs-sm">Msed quia non numquam eius</span>
                                                                <span class="fs-nano text-muted mt-1">3 weeks ago</span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#" class="d-flex align-items-center">
                                                            <span class="status status-success mr-2">
                                                                <span class="profile-image rounded-circle d-inline-block" style="background-image:url('static/img/demo/avatars/avatar-m.png')"></span>
                                                            </span>
                                                                <span class="d-flex flex-column flex-1 ml-1">
                                                                <span class="name">Anothony Bezyeth</span>
                                                                <span class="msg-a fs-sm">Msed quia non numquam eius</span>
                                                                <span class="fs-nano text-muted mt-1">one month ago</span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#" class="d-flex align-items-center">
                                                            <span class="status status-danger mr-2">
                                                                <span class="profile-image rounded-circle d-inline-block" style="background-image:url('static/img/demo/avatars/avatar-j.png')"></span>
                                                            </span>
                                                                <span class="d-flex flex-column flex-1 ml-1">
                                                                <span class="name">Lisa Hatchensen</span>
                                                                <span class="msg-a fs-sm">Msed quia non numquam eius</span>
                                                                <span class="fs-nano text-muted mt-1">one year ago</span>
                                                            </span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!-- app user menu -->
                                            <div>
                                                <a href="#" data-toggle="dropdown" title="drlantern@bootstrapmb.com" class="header-icon d-flex align-items-center justify-content-center ml-2">
                                                    <img src="../../static/img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Dr. Codex Lantern">
                                                    <!-- you can also add username next to the avatar with the codes below:
                                                    <span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
                                                    <i class="ni ni-chevron-down hidden-xs-down"></i> -->
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-animated dropdown-lg">
                                                    <div class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
                                                        <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
                                            <span class="mr-2">
                                                <img src="../../static/img/demo/avatars/avatar-admin.png" class="rounded-circle profile-image" alt="Dr. Codex Lantern">
                                            </span>
                                                            <div class="info-card-text">
                                                                <div class="fs-lg text-truncate text-truncate-lg">Dr. Codex Lantern</div>
                                                                <span class="text-truncate text-truncate-md opacity-80">drlantern@bootstrapmb.com</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="dropdown-divider m-0"></div>
                                                    <a href="#" class="dropdown-item" data-action="app-reset">
                                                        <span data-i18n="drpdwn.reset_layout">Reset Layout</span>
                                                    </a>
                                                    <a href="#" class="dropdown-item" data-toggle="modal" data-target=".js-modal-settings">
                                                        <span data-i18n="drpdwn.settings">Settings</span>
                                                    </a>
                                                    <div class="dropdown-divider m-0"></div>
                                                    <a href="#" class="dropdown-item" data-action="app-fullscreen">
                                                        <span data-i18n="drpdwn.fullscreen">Fullscreen</span>
                                                        <i class="float-right text-muted fw-n">F11</i>
                                                    </a>
                                                    <a href="#" class="dropdown-item" data-action="app-print">
                                                        <span data-i18n="drpdwn.print">Print</span>
                                                        <i class="float-right text-muted fw-n">Ctrl + P</i>
                                                    </a>
                                                    <div class="dropdown-multilevel dropdown-multilevel-left">
                                                        <div class="dropdown-item">
                                                            Language
                                                        </div>
                                                        <div class="dropdown-menu">
                                                            <a href="#?lang=fr" class="dropdown-item" data-action="lang" data-lang="fr">Français</a>
                                                            <a href="#?lang=en" class="dropdown-item active" data-action="lang" data-lang="en">English (US)</a>
                                                            <a href="#?lang=es" class="dropdown-item" data-action="lang" data-lang="es">Español</a>
                                                            <a href="#?lang=ru" class="dropdown-item" data-action="lang" data-lang="ru">Русский язык</a>
                                                            <a href="#?lang=jp" class="dropdown-item" data-action="lang" data-lang="jp">日本語</a>
                                                            <a href="#?lang=ch" class="dropdown-item" data-action="lang" data-lang="ch">中文</a>
                                                        </div>
                                                    </div>
                                                    <div class="dropdown-divider m-0"></div>
                                                    <a class="dropdown-item fw-500 pt-3 pb-3" href="page_login-alt.html">
                                                        <span data-i18n="drpdwn.page-logout">Logout</span>
                                                        <span class="float-right fw-n">&commat;codexlantern</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>
                <!-- END Page Header -->
                <!-- BEGIN Page Content -->
                <!-- the #js-page-content id is needed for some plugins to initialize -->
                <main id="js-page-content" role="main" class="page-content">
                    <!-- Page heading removed for composed layout -->
                    <div class="d-flex flex-grow-1 p-0">

                        <div class="slide-backdrop" data-action="toggle" data-class="slide-on-mobile-left-show" data-target="#js-inbox-menu"></div> <!-- end left slider -->
                        <!-- inbox container -->
                        <div class="d-flex flex-column flex-grow-1 bg-white">
                            <!-- inbox header -->
                            <div class="flex-grow-0">
                                <!-- inbox title -->
                                <div class="d-flex align-items-center pl-2 pr-3 py-3 pl-sm-3 pr-sm-4 py-sm-4 px-lg-5 py-lg-4  border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">
                                    <!-- button for mobile -->
                                    <a href="javascript:void(0);" class="pl-3 pr-3 py-2 d-flex d-lg-none align-items-center justify-content-center mr-2 btn" data-action="toggle" data-class="slide-on-mobile-left-show" data-target="#js-inbox-menu">
                                        <i class="fal fa-ellipsis-v h1 mb-0 "></i>
                                    </a>
                                    <!-- end button for mobile -->
                                    <h1 class="subheader-title">
                                        New message
                                    </h1>
                                    <div class="d-flex position-relative ml-auto hidden-lg-down" style="max-width: 23rem;">
                                        <i class="fas fa-search position-absolute pos-left fs-lg px-3 py-2 mt-1"></i>
                                        <input type="text" class="form-control bg-subtlelight pl-6" placeholder="Filter emails">
                                    </div>
                                </div>
                                <!-- end inbox title -->
                            </div>
                            <!-- end inbox header -->
                            <!-- inbox message -->
                            <div class="flex-wrap align-items-center flex-grow-1 position-relative bg-white mx-lg-3">
                                <div class=" position-absolute pos-top pos-bottom w-100">
                                    <div class="d-flex h-100 flex-column">
                                        <div class="px-3">
                                            <input name="Message"  disabled="disabled" type="text" placeholder="Message"  class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 pr-5" tabindex="4">
                                            <input style="display: none" name="id" th:value="${score.id}" ></input>
                                            <input name="id" type="text" th:value="${score.id}" placeholder="id"  class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">
                                            <input   type="text" placeholder="idCard"  class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 d-none" tabindex="3">
                                            <input name="idCard" type="text" th:value="${score.idCard}" placeholder="idCard"  class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">
                                            <input  type="text" placeholder="Name" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 d-none" tabindex="3">
                                            <input name="name" th:value="${score.name}" type="text" placeholder="Name" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">
                                            <input  type="text" placeholder="Score" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 d-none" tabindex="3">
                                            <input name="score" th:value="${score.score}" type="text" placeholder="Score" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">
                                            <input  type="text" placeholder="Evaluate" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 d-none" tabindex="3">
                                            <input name="evaluate" th:value="${score.evaluate}" type="text" placeholder="Evaluate" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">
                                        </div>
                                             <button href="javascript:void(0);" class="btn btn-info mr-3" type="submit">Save</button>

                                        <!--                                        <div class="flex-1" style="overflow-y: auto;">-->
<!--                                            <div id='' class="form-control rounded-0 w-100 h-100 border-0 py-3" contenteditable tabindex="5">-->
<!--                                                <br>-->
<!--                                                <br>-->
<!--                                                <div class="d-flex d-column align-items-start mb-3">-->
<!--                                                    <img src="/img/logo.png" alt="SmartAdmin WebApp" class="mr-3 mt-1">-->
<!--                                                    <div class="border-left pl-3">-->
<!--                                                        <span class="fw-500 fs-lg d-block l-h-n">Dr. Codex Lantern</span>-->
<!--                                                        <span class="fw-400 fs-nano d-block l-h-n mb-1">Orthopedic Surgeon</span>-->
<!--                                                        <a href="#" class="mr-1 fs-xl" style="color:#3b5998"><i class="fab fa-facebook-square"></i></a>-->
<!--                                                        <a href="#" class="mr-1 fs-xl" style="color:#38A1F3"><i class="fab fa-twitter-square"></i></a>-->
<!--                                                        <a href="#" class="mr-1 fs-xl" style="color:#0077B5"><i class="fab fa-linkedin"></i></a>-->
<!--                                                        <a href="#" class="mr-1 fs-xl" style="color:#ff0000"><i class="fab fa-youtube-square"></i></a>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="text-muted fs-nano">-->
<!--                                                    ​PRIVATE AND CONFIDENTIAL. This e-mail, its contents and attachments are private and confidential and is intended for the recipient only. Any disclosure, copying or unauthorized use of such information is prohibited. If you receive this message in error, please notify us immediately and delete the original and any copies and attachments.-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                        <div class="px-3 py-4 d-flex flex-row align-items-center flex-wrap flex-shrink-0">-->
<!--                                            <a href="javascript:void(0);" class="btn btn-info mr-3" type="submit">Add</a>-->
<!--                                            <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Formatting options" data-placement="top">-->
<!--                                                <i class="fas fa-font color-fusion-300"></i>-->
<!--                                            </a>-->
<!--                                            <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Attach files" data-placement="top">-->
<!--                                                <i class="fas fa-paperclip color-fusion-300"></i>-->
<!--                                            </a>-->
<!--                                            <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Insert photo" data-placement="top">-->
<!--                                                <i class="fas fa-camera color-fusion-300"></i>-->
<!--                                            </a>-->
<!--                                            <div class="ml-auto">-->
<!--                                                <a href="javascript:void(0);" class="btn btn-icon fs-xl" data-toggle="tooltip" data-original-title="Disregard draft" data-placement="top">-->
<!--                                                    <i class="fas fa-trash color-fusion-300"></i>-->
<!--                                                </a>-->
<!--                                                <a href="javascript:void(0);" class="btn btn-icon fs-xl width-1" data-toggle="tooltip" data-original-title="More options" data-placement="top">-->
<!--                                                    <i class="fas fa-ellipsis-v-alt color-fusion-300"></i>-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                        </div>-->
                                    </div>
                                </div>
                            </div>
                            <!-- end inbox message -->
                        </div>
                        <!-- end inbox container -->
                        <!-- compose message -->
<!--                        <div id="panel-compose" class="panel w-100 position-fixed pos-bottom pos-right mb-0 z-index-cloud mr-lg-4 shadow-3 border-bottom-left-radius-0 border-bottom-right-radius-0 expand-full-height-on-mobile expand-full-width-on-mobile shadow" style="max-width:40rem; height:35rem; display: none;">-->
<!--                            <div class="position-relative h-100 w-100 d-flex flex-column">-->
<!--                                &lt;!&ndash; desktop view &ndash;&gt;-->
<!--                                <div class="panel-hdr bg-fusion-600 height-4 d-none d-sm-none d-lg-flex">-->
<!--                                    <h4 class="flex-1 fs-lg color-white mb-0 pl-3">-->
<!--                                        New Message-->
<!--                                    </h4>-->
<!--                                    <div class="panel-toolbar pr-2">-->
<!--                                        <a href="javascript:void(0);" class="btn btn-icon btn-icon-light fs-xl mr-1" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen" data-placement="bottom">-->
<!--                                            <i class="fal fa-expand-alt"></i>-->
<!--                                        </a>-->
<!--                                        <a href="javascript:void(0);" class="btn btn-icon btn-icon-light fs-xl" data-action="toggle" data-class="d-flex" data-target="#panel-compose" data-toggle="tooltip" data-original-title="Save & Close" data-placement="bottom">-->
<!--                                            <i class="fal fa-times"></i>-->
<!--                                        </a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                &lt;!&ndash; end desktop view &ndash;&gt;-->
<!--                                &lt;!&ndash; mobile view &ndash;&gt;-->
<!--                                <div class="d-flex d-lg-none align-items-center px-3 py-3 bg-faded  border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">-->
<!--                                    &lt;!&ndash; button for mobile &ndash;&gt;-->
<!--                                    &lt;!&ndash; end button for mobile &ndash;&gt;-->
<!--                                    <h3 class="subheader-title">-->
<!--                                        New message-->
<!--                                    </h3>-->
<!--                                    <div class="ml-auto">-->
<!--                                        <button type="button" class="btn btn-outline-danger" data-action="toggle" data-class="d-flex" data-target="#panel-compose">Cancel</button>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                &lt;!&ndash; end mobile view &ndash;&gt;-->
<!--                                <div class="panel-container show rounded-0 flex-1 d-flex flex-column">-->
<!--                                    <div class="px-3">-->
<!--                                        <input id="message-to" type="text" placeholder="Recipients" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 pr-5" tabindex="2">-->
<!--                                        <a href="javascript:void(0)" class="position-absolute pos-right pos-top mt-3 mr-4" data-action="toggle" data-class="d-block" data-target="#message-to-cc" data-focus="message-to-cc" data-toggle="tooltip" data-original-title="Add Cc recipients" data-placement="bottom">Cc</a>-->
<!--                                        <input id="message-to-cc" type="text" placeholder="Cc" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 d-none" tabindex="3">-->
<!--                                        <input type="text" placeholder="Subject" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">-->
<!--                                    </div>-->
<!--                                    <div class="flex-1" style="overflow-y: auto;">-->
<!--                                        <div id='fake_textarea' class="form-control rounded-0 w-100 h-100 border-0 py-3" contenteditable tabindex="5">-->
<!--                                            <br>-->
<!--                                            <br>-->
<!--                                            <div class="d-flex d-column align-items-start mb-3">-->
<!--                                                <img src="/img/logo.png" alt="SmartAdmin WebApp" class="mr-3 mt-1">-->
<!--                                                <div class="border-left pl-3">-->
<!--                                                    <span class="fw-500 fs-lg d-block l-h-n">Dr. Codex Lantern</span>-->
<!--                                                    <span class="fw-400 fs-nano d-block l-h-n mb-1">Orthopedic Surgeon</span>-->
<!--                                                    <a href="#" class="mr-1 fs-xl" style="color:#3b5998"><i class="fab fa-facebook-square"></i></a>-->
<!--                                                    <a href="#" class="mr-1 fs-xl" style="color:#38A1F3"><i class="fab fa-twitter-square"></i></a>-->
<!--                                                    <a href="#" class="mr-1 fs-xl" style="color:#0077B5"><i class="fab fa-linkedin"></i></a>-->
<!--                                                    <a href="#" class="mr-1 fs-xl" style="color:#ff0000"><i class="fab fa-youtube-square"></i></a>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            <div class="text-muted fs-nano">-->
<!--                                                ​PRIVATE AND CONFIDENTIAL. This e-mail, its contents and attachments are private and confidential and is intended for the recipient only. Any disclosure, copying or unauthorized use of such information is prohibited. If you receive this message in error, please notify us immediately and delete the original and any copies and attachments.-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="px-3 py-4 d-flex flex-row align-items-center flex-wrap flex-shrink-0">-->
<!--                                        <a href="javascript:void(0);" class="btn btn-info mr-3">Add</a>-->
<!--                                        <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Formatting options" data-placement="top">-->
<!--                                            <i class="fas fa-font color-fusion-300"></i>-->
<!--                                        </a>-->
<!--                                        <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Attach files" data-placement="top">-->
<!--                                            <i class="fas fa-paperclip color-fusion-300"></i>-->
<!--                                        </a>-->
<!--                                        <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Insert photo" data-placement="top">-->
<!--                                            <i class="fas fa-camera color-fusion-300"></i>-->
<!--                                        </a>-->
<!--                                        <div class="ml-auto">-->
<!--                                            <a href="javascript:void(0);" class="btn btn-icon fs-xl" data-toggle="tooltip" data-original-title="Disregard draft" data-placement="top">-->
<!--                                                <i class="fas fa-trash color-fusion-300"></i>-->
<!--                                            </a>-->
<!--                                            <a href="javascript:void(0);" class="btn btn-icon fs-xl width-1" data-toggle="tooltip" data-original-title="More options" data-placement="top">-->
<!--                                                <i class="fas fa-ellipsis-v-alt color-fusion-300"></i>-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div> &lt;!&ndash; end compose message &ndash;&gt;-->
                    </div>
                </main>
                <!-- this overlay is activated only when mobile menu is triggered -->
                <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> <!-- END Page Content -->
                <!-- BEGIN Page Footer -->
                <footer class="page-footer" role="contentinfo">
                    <div class="d-flex align-items-center flex-1 text-muted">
                        <span class="hidden-md-down fw-700">2019 © SmartAdmin by&nbsp;<a href='http://www.bootstrapmb.com' class='text-primary fw-500' title='bootstrapmb.com' target='_blank'>bootstrapmb.com</a></span>
                    </div>
                    <div>
                        <ul class="list-table m-0">
                            <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
                            <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
                            <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
                            <li class="pl-3 fs-xl"><a href="http://www.bootstrapmb.com" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
                        </ul>
                    </div>
                </footer>
                <!-- END Page Footer -->
                <!-- BEGIN Shortcuts -->
                <!-- modal shortcut -->

                <!-- END Page Wrapper -->
                <!-- BEGIN Quick Menu -->
                <!-- to add more items, please make sure to change the variable '$menu-items: number;' in your _page-components-shortcut.scss -->
                <nav class="shortcut-menu d-none d-sm-block">
                    <input type="checkbox" class="menu-open" name="menu-open" id="menu_open" />
                    <label for="menu_open" class="menu-open-button ">
                        <span class="app-shortcut-icon d-block"></span>
                    </label>
                    <a href="#" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Scroll Top">
                        <i class="fal fa-arrow-up"></i>
                    </a>
                    <a href="page_login-alt.html" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Logout">
                        <i class="fal fa-sign-out"></i>
                    </a>
                    <a href="#" class="menu-item btn" data-action="app-fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen">
                        <i class="fal fa-expand"></i>
                    </a>
                    <a href="#" class="menu-item btn" data-action="app-print" data-toggle="tooltip" data-placement="left" title="Print page">
                        <i class="fal fa-print"></i>
                    </a>
                    <a href="#" class="menu-item btn" data-action="app-voice" data-toggle="tooltip" data-placement="left" title="Voice command">
                        <i class="fal fa-microphone"></i>
                    </a>
                </nav>
                <!-- END Quick Menu -->
                <!-- BEGIN Messenger -->
                <div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-right">
                        <div class="modal-content h-100">
                            <div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
                                <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
                            <span class="mr-2">
                                <span class="rounded-circle profile-image d-block" style="background-image:url('static/img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
                            </span>
                                    <div class="info-card-text">
                                        <a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white" data-toggle="dropdown" aria-expanded="false">
                                            Tracey Chang
                                            <i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Send Email</a>
                                            <a class="dropdown-item" href="#">Create Appointment</a>
                                            <a class="dropdown-item" href="#">Block User</a>
                                        </div>
                                        <span class="text-truncate text-truncate-md opacity-80">IT Director</span>
                                    </div>
                                </div>
                                <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                                </button>
                            </div>
                            <div class="modal-body p-0 h-100 d-flex">
                                <!-- BEGIN msgr-list -->
                                <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
                                    <div>
                                        <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
                                            <i class="fal fa-search"></i>
                                        </div>
                                        <input type="text" class="form-control bg-white" id="msgr_listfilter_input" placeholder="Filter contacts" aria-label="FriendSearch" data-listfilter="#js-msgr-listfilter">
                                    </div>
                                    <div class="flex-1 h-100 custom-scroll">
                                        <div class="w-100">
                                            <ul id="js-msgr-listfilter" class="list-unstyled m-0">
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="tracey chang online">
                                                        <div class="d-table-cell align-middle status status-success status-sm ">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                Tracey Chang
                                                                <small class="d-block font-italic text-success fs-xs">
                                                                    Online
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="oliver kopyuv online">
                                                        <div class="d-table-cell align-middle status status-success status-sm ">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                Oliver Kopyuv
                                                                <small class="d-block font-italic text-success fs-xs">
                                                                    Online
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="dr john cook phd away">
                                                        <div class="d-table-cell align-middle status status-warning status-sm ">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                Dr. John Cook PhD
                                                                <small class="d-block font-italic fs-xs">
                                                                    Away
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney online">
                                                        <div class="d-table-cell align-middle status status-success status-sm ">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                Ali Amdaney
                                                                <small class="d-block font-italic fs-xs text-success">
                                                                    Online
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="sarah mcbrook online">
                                                        <div class="d-table-cell align-middle status status-success status-sm">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                Sarah McBrook
                                                                <small class="d-block font-italic fs-xs text-success">
                                                                    Online
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney offline">
                                                        <div class="d-table-cell align-middle status status-sm">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                oliver.kopyuv@bootstrapmb.com
                                                                <small class="d-block font-italic fs-xs">
                                                                    Offline
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney busy">
                                                        <div class="d-table-cell align-middle status status-danger status-sm">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                oliver.kopyuv@bootstrapmb.com
                                                                <small class="d-block font-italic fs-xs text-danger">
                                                                    Busy
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney offline">
                                                        <div class="d-table-cell align-middle status status-sm">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                oliver.kopyuv@bootstrapmb.com
                                                                <small class="d-block font-italic fs-xs">
                                                                    Offline
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney inactive">
                                                        <div class="d-table-cell align-middle">
                                                            <span class="profile-image-md rounded-circle d-block" style="background-image:url('static/img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
                                                        </div>
                                                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                            <div class="text-truncate text-truncate-md">
                                                                +714651347790
                                                                <small class="d-block font-italic fs-xs opacity-50">
                                                                    Missed Call
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                            <div class="filter-message js-filter-message"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <a class="fs-xl d-flex align-items-center p-3">
                                            <i class="fal fa-cogs"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- END msgr-list -->

                        </div> <!-- END Messenger -->

                        <!-- base vendor bundle:
                             DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
                                        + pace.js (recommended)
                                        + jquery.js (core)
                                        + jquery-ui-cust.js (core)
                                        + popper.js (core)
                                        + bootstrap.js (core)
                                        + slimscroll.js (extension)
                                        + app.navigation.js (core)
                                        + ba-throttle-debounce.js (core)
                                        + waves.js (extension)
                                        + smartpanels.js (extension)
                                        + src/../jquery-snippets.js (core) -->
                        <script src="/js/vendors.bundle.js"></script>
                        <script src="/js/app.bundle.js"></script>
                        <script type="text/javascript">
                            // push settings with "false" save to local
                            initApp.pushSettings("nav-function-minify layout-composed", false);
                            $('.shortcut-menu').addClass('d-none');
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>
</body>
</html>
